<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录与注册</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        light: '#E8F3FF',
                        dark: '#0E42D2',
                        neutral: '#F5F7FA'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 10px 30px -5px rgba(22, 93, 255, 0.1);
      }
      .input-focus {
        @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
      }
      .btn-hover {
        @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
      }
    }
  </style>

    <style>
        /* 全局样式 */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #F9FBFF;
            background-image:
                radial-gradient(circle at 10% 20%, rgba(22, 93, 255, 0.03) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(22, 93, 255, 0.03) 0%, transparent 20%);
            background-attachment: fixed;
        }

        /* 动画效果 */
        .form-container {
            transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
        }

        .form-container.hidden {
            transform: translateY(20px);
            opacity: 0;
            pointer-events: none;
        }

        /* 验证码样式 */
        #captchaImage {
            background-image: url('https://picsum.photos/150/50');
            background-size: cover;
            background-position: center;
            cursor: pointer;
        }
    </style>
</head>

<body class="min-h-screen flex items-center justify-center p-4 md:p-6 lg:p-8">
    <!-- 主容器 -->
    <div class="w-full max-w-md">
        <!-- 卡片容器 -->
        <div class="bg-white rounded-2xl card-shadow overflow-hidden">
            <!-- 标题区域 -->
            <div class="bg-primary/5 px-6 py-6 border-b border-primary/10">
                <h1 class="text-[clamp(1.5rem,5vw,1.8rem)] font-bold text-gray-800 text-center">
                    <span id="formTitle">用户登录</span>
                </h1>
                <p class="text-gray-500 text-center mt-1" id="formSubtitle">请输入账号密码登录系统</p>
            </div>

            <!-- 表单区域 -->
            <div class="p-6 md:p-8">
                <!-- 登录表单 -->
                <form id="loginForm" class="form-container space-y-5">
                    <!-- 账号输入 -->
                    <div>
                        <label for="loginAccount" class="block text-sm font-medium text-gray-700 mb-1">账号</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-user text-gray-400"></i>
                            </div>
                            <input type="text" id="loginAccount" name="loginAccount"
                                class="pl-10 w-full rounded-lg border border-gray-300 py-3 px-4 bg-neutral input-focus"
                                placeholder="请输入账号" required>
                        </div>
                    </div>

                    <!-- 密码输入 -->
                    <div>
                        <label for="loginPassword" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-lock text-gray-400"></i>
                            </div>
                            <input type="password" id="loginPassword" name="loginPassword"
                                class="pl-10 w-full rounded-lg border border-gray-300 py-3 px-4 bg-neutral input-focus"
                                placeholder="请输入密码" required>
                            <button type="button" id="toggleLoginPassword"
                                class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-primary">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>

                    <!-- 验证码 -->
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label for="captcha" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-shield text-gray-400"></i>
                                </div>
                                <input type="text" id="captcha" name="captcha"
                                    class="pl-10 w-full rounded-lg border border-gray-300 py-3 px-4 bg-neutral input-focus"
                                    placeholder="请输入验证码" required>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">验证码图片</label>
                            <div id="captchaImage"
                                class="h-12 rounded-lg bg-gray-100 flex items-center justify-center text-gray-500 border border-gray-300">
                                <span class="text-sm">点击刷新</span>
                            </div>
                        </div>
                    </div>

                    <!-- 记住密码和忘记密码 -->
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <input id="rememberMe" name="rememberMe" type="checkbox"
                                class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary">
                            <label for="rememberMe" class="ml-2 block text-sm text-gray-700">
                                记住我
                            </label>
                        </div>
                        <a href="#" class="text-sm text-primary hover:text-dark transition-colors">
                            忘记密码?
                        </a>
                    </div>

                    <!-- 登录按钮 -->
                    <button type="submit"
                        class="w-full bg-primary text-white font-medium py-3 px-4 rounded-lg btn-hover">
                        登录
                    </button>
                </form>

                <!-- 注册表单 -->
                <form id="registerForm" class="form-container hidden space-y-5">
                    <!-- 学号输入 -->
                    <div>
                        <label for="studentId" class="block text-sm font-medium text-gray-700 mb-1">学号</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-id-card text-gray-400"></i>
                            </div>
                            <input type="text" id="studentId" name="studentId"
                                class="pl-10 w-full rounded-lg border border-gray-300 py-3 px-4 bg-neutral input-focus"
                                placeholder="请输入学号" required>
                        </div>
                    </div>

                    <!-- 账号输入 -->
                    <div>
                        <label for="registerAccount" class="block text-sm font-medium text-gray-700 mb-1">账号</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-user text-gray-400"></i>
                            </div>
                            <input type="text" id="registerAccount" name="registerAccount"
                                class="pl-10 w-full rounded-lg border border-gray-300 py-3 px-4 bg-neutral input-focus"
                                placeholder="请设置账号" required>
                        </div>
                    </div>

                    <!-- 密码输入 -->
                    <div>
                        <label for="registerPassword" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-lock text-gray-400"></i>
                            </div>
                            <input type="password" id="registerPassword" name="registerPassword"
                                class="pl-10 w-full rounded-lg border border-gray-300 py-3 px-4 bg-neutral input-focus"
                                placeholder="请设置密码" required>
                            <button type="button" id="toggleRegisterPassword"
                                class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-primary">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                        <p class="mt-1 text-xs text-gray-500">密码长度至少8位，包含字母和数字</p>
                    </div>

                    <!-- COR输入 -->
                    <div>
                        <label for="cor" class="block text-sm font-medium text-gray-700 mb-1">COR</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-building text-gray-400"></i>
                            </div>
                            <input type="text" id="cor" name="cor"
                                class="pl-10 w-full rounded-lg border border-gray-300 py-3 px-4 bg-neutral input-focus"
                                placeholder="请输入COR信息" required>
                        </div>
                    </div>

                    <!-- 注册按钮 -->
                    <button type="submit"
                        class="w-full bg-primary text-white font-medium py-3 px-4 rounded-lg btn-hover">
                        注册
                    </button>
                </form>

                <!-- 切换表单链接 -->
                <div class="mt-6 text-center">
                    <p class="text-gray-600">
                        <span id="toggleText">还没有账号?</span>
                        <button type="button" id="toggleForm"
                            class="font-medium text-primary hover:text-dark ml-1 transition-colors">
                            立即注册
                        </button>
                    </p>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <p class="text-center text-gray-500 text-sm mt-6">
            &copy; 2025 系统名称. 保留所有权利.
        </p>
    </div>

    <script>
        // 获取DOM元素
        const loginForm = document.getElementById('loginForm');
        const registerForm = document.getElementById('registerForm');
        const toggleFormBtn = document.getElementById('toggleForm');
        const formTitle = document.getElementById('formTitle');
        const formSubtitle = document.getElementById('formSubtitle');
        const toggleText = document.getElementById('toggleText');
        const toggleLoginPassword = document.getElementById('toggleLoginPassword');
        const toggleRegisterPassword = document.getElementById('toggleRegisterPassword');
        const loginPassword = document.getElementById('loginPassword');
        const registerPassword = document.getElementById('registerPassword');
        const captchaImage = document.getElementById('captchaImage');

        // 切换登录/注册表单
        let isLoginForm = true;

        toggleFormBtn.addEventListener('click', () => {
            // 隐藏当前表单
            if (isLoginForm) {
                loginForm.classList.add('hidden');
                setTimeout(() => {
                    // 显示注册表单
                    registerForm.classList.remove('hidden');
                    formTitle.textContent = '用户注册';
                    formSubtitle.textContent = '请填写信息完成注册';
                    toggleText.textContent = '已有账号?';
                    toggleFormBtn.textContent = '立即登录';
                    isLoginForm = false;
                }, 300);
            } else {
                registerForm.classList.add('hidden');
                setTimeout(() => {
                    // 显示登录表单
                    loginForm.classList.remove('hidden');
                    formTitle.textContent = '用户登录';
                    formSubtitle.textContent = '请输入账号密码登录系统';
                    toggleText.textContent = '还没有账号?';
                    toggleFormBtn.textContent = '立即注册';
                    isLoginForm = true;
                }, 300);
            }
        });

        // 切换密码可见性
        toggleLoginPassword.addEventListener('click', () => {
            const type = loginPassword.getAttribute('type') === 'password' ? 'text' : 'password';
            loginPassword.setAttribute('type', type);
            // 切换图标
            toggleLoginPassword.querySelector('i').classList.toggle('fa-eye');
            toggleLoginPassword.querySelector('i').classList.toggle('fa-eye-slash');
        });

        toggleRegisterPassword.addEventListener('click', () => {
            const type = registerPassword.getAttribute('type') === 'password' ? 'text' : 'password';
            registerPassword.setAttribute('type', type);
            // 切换图标
            toggleRegisterPassword.querySelector('i').classList.toggle('fa-eye');
            toggleRegisterPassword.querySelector('i').classList.toggle('fa-eye-slash');
        });

        // 刷新验证码
        function generateCaptcha() {
            // 生成随机验证码文本
            const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            let captcha = '';
            for (let i = 0; i < 4; i++) {
                captcha += chars.charAt(Math.floor(Math.random() * chars.length));
            }

            // 创建验证码图像
            const canvas = document.createElement('canvas');
            canvas.width = 150;
            canvas.height = 50;
            const ctx = canvas.getContext('2d');

            // 背景色
            ctx.fillStyle = '#f3f4f6';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 绘制干扰线
            for (let i = 0; i < 5; i++) {
                ctx.strokeStyle = `rgba(22, 93, 255, ${Math.random() * 0.3 + 0.1})`;
                ctx.beginPath();
                ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
                ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
                ctx.stroke();
            }

            // 绘制验证码文本
            ctx.font = 'bold 24px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            // 每个字符不同颜色和旋转角度
            for (let i = 0; i < captcha.length; i++) {
                const char = captcha.charAt(i);
                const x = 30 + i * 30;
                const y = canvas.height / 2;
                const angle = (Math.random() - 0.5) * 0.5; // 随机旋转角度

                ctx.save();
                ctx.translate(x, y);
                ctx.rotate(angle);
                ctx.fillStyle = `rgba(14, 66, 210, ${Math.random() * 0.3 + 0.7})`;
                ctx.fillText(char, 0, 0);
                ctx.restore();
            }

            // 更新验证码图像
            captchaImage.innerHTML = '';
            captchaImage.appendChild(canvas);

            // 存储正确的验证码（实际应用中应该在服务器端验证）
            captchaImage.dataset.correctCaptcha = captcha;
        }

        // 初始生成验证码
        generateCaptcha();

        // 点击刷新验证码
        captchaImage.addEventListener('click', generateCaptcha);

        // 表单提交处理
        loginForm.addEventListener('submit', (e) => {
            e.preventDefault();

            // 获取表单值
            const account = document.getElementById('loginAccount').value;
            const password = loginPassword.value;
            const captcha = document.getElementById('captcha').value;

            // 简单验证
            if (!account || !password) {
                alert('请输入账号和密码');
                return;
            }

            // 验证码验证
            if (captcha.toUpperCase() !== captchaImage.dataset.correctCaptcha) {
                alert('验证码不正确');
                generateCaptcha(); // 刷新验证码
                return;
            }

            // 实际应用中这里应该发送请求到服务器验证
            alert('登录功能待实现: 账号=' + account + ', 密码=' + password);
        });

        registerForm.addEventListener('submit', (e) => {
            e.preventDefault();

            // 获取表单值
            const studentId = document.getElementById('studentId').value;
            const account = document.getElementById('registerAccount').value;
            const password = registerPassword.value;
            const cor = document.getElementById('cor').value;

            // 简单验证
            if (!studentId || !account || !password || !cor) {
                alert('请填写所有字段');
                return;
            }

            // 密码强度验证
            if (password.length < 8 || !/\d/.test(password) || !/[a-zA-Z]/.test(password)) {
                alert('密码长度至少8位，且必须包含字母和数字');
                return;
            }

            // 实际应用中这里应该发送请求到服务器注册
            alert('注册功能待实现: 学号=' + studentId + ', 账号=' + account + ', COR=' + cor);

            // 注册成功后切换到登录表单
            registerForm.classList.add('hidden');
            setTimeout(() => {
                loginForm.classList.remove('hidden');
                formTitle.textContent = '用户登录';
                formSubtitle.textContent = '请输入账号密码登录系统';
                toggleText.textContent = '还没有账号?';
                toggleFormBtn.textContent = '立即注册';
                isLoginForm = true;
            }, 300);
        });
    </script>
</body>

</html>